<template>
  <div>
    <div class="nav">
      <a
        href="javascript:void(0);"
        :class="index == isactive ? 'active' : ''"
        @click="handelchange(index)"
        :key="index"
        v-for="(item, index) in tablist"
        >{{ item.name }}
      </a>
    </div>
    <div class="content">
      <ScoreList :is='currentView' keep-alive @receive="receive"></ScoreList>
    </div>
  </div>
</template>

<script>
import ScoreList from './ScoreList.vue';
import AddScoreList from './AddScoreList.vue';
export default {
  components: {
    ScoreList,
    AddScoreList
  },
  data() {
    return {
      tablist: [
        { name: '评分表列表' },
        { name: '新建评分表' }],
      isactive: 0,
      currentView: 'ScoreList'
    };
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'ScoreList';
      } else {
        this.currentView = 'AddScoreList';
      }
    },
    receive() {
      // console.log(val);
      this.isactive = 0;
      this.currentView = 'ScoreList';
    }
  }
};
</script>
<style lang="less" scoped>
.nav {
  width: 1880px;
  height: 45px;
  background: #ffffff;
  box-shadow: 0px 1px 2px 0px #b9b9b9;
  border-radius: 30px;
  margin-top: 15px;
  line-height: 45px;
  margin-left: 20px;
  padding-left: 5px;
  a {
    box-sizing: border-box;
    display: inline-block;
    height: 35px;
    text-align: center;
    font-size: 16px;
    line-height: 35px;
    border-radius: 26px;
    color: #000000;
    transition: all 0.3s;
    padding: 0 25px;
    margin-right: 100px;
  }
  .active {
    background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    box-shadow: 1px 0px 5px #1160cf, -1px 0px 5px #cd06bf;

    color: #ffffff;
  }
}
// .el-tabs__active-bar{
//   color: transparent;
//   width: 122px;
// height: 37px;
// }
</style>
